<!--
 * @Description: 
 * @Date: 2023-02-21 17:11:15
 * @LastEditors: czp
 * @LastEditTime: 2023-05-09 09:35:43
-->
<template>
	<div v-if="!showPage && breakPoint != 'xs'">
		<div @click="showPage = true" class="skip-btn">跳过</div>
		<video muted ref="videoRef" class="video" :src="cosPrefix + 'index.mp4'" autoplay @ended="playEnd"></video>
	</div>

	<div v-if="showPage" class="body fade-in-bck">
		<div class="nav">
			<el-image class="logo" :src="cosPrefix + 'header/LOGO.png?imageMogr2/thumbnail/375x'" />
			<ToolRight class="tool-right" color="#c39f63" />
		</div>

		<Header class="header" />
		<XiangYe v-if="breakPoint == 'xs'" />
		<XiangLv v-if="breakPoint == 'xs'" />
		<XiangQu v-if="breakPoint == 'xs'" />
		<XiangSu v-if="breakPoint == 'xs'" />
		<XiangMeng v-if="breakPoint == 'xs'" />
		<BaseFooter :showFriendLinks="true" :showFooter="false" />
	</div>
	<PreviewVideo ref="PVVideoRef" :video="preVideo" />
</template>
<script setup lang="ts">
import Header from "./components/Header.vue";
import { useBaseStore } from "@/store/base";
import { PVideo } from "@/components/interface";
import { getEnvMode } from "@/utils/env";

const { cosPrefix } = useBaseStore();

// 屏幕断点
const { breakPoint } = storeToRefs(useBaseStore());
const showPage = ref(getEnvMode() == "dev" || breakPoint.value == "xs");

const videoRef = ref();
const playEnd = () => {
	showPage.value = true;
};

const preVideo = ref<PVideo>({ title: "", src: "" });
const PVVideoRef = ref();

provide("playVideo", (res: PVideo) => {
	preVideo.value = res;
	PVVideoRef.value.play();
});
</script>
<style lang="scss" scoped>
@import "/src/animation.scss";
.body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	.header {
		flex: 1;
	}
}
.video {
	width: 100vw;
	height: 100vh;
	vertical-align: middle;
	background-color: #000000;
	object-fit: cover;
}
.skip-btn {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 9;
	padding: 4px 16px;
	color: #ffffff;
	cursor: pointer;
}
.nav {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 99;
	display: flex;
	justify-content: space-between;
	padding: 50px;
	.logo {
		width: 200px;
	}
}

@media all and (max-width: 750px) {
	.nav {
		padding: 16px;
		background-color: rgba($color: #000000, $alpha: 10%);
		.logo {
			width: 100px;
		}
	}
}
</style>
